﻿<template>
  <div class="detail">
    <detail-banner :slightName="slightName" :bannerImg="bannerImg" :galleryImgs="galleryImgs"></detail-banner> 
    <detail-header></detail-header>  
    <detail-map></detail-map>
    <router-view></router-view>
    <detail-ticket :categoryList="categoryList"></detail-ticket> 
  </div>
</template>

<script>
import axios from 'axios'
import DetailBanner from './components/DetailBanner'
import DetailHeader from './components/DetailHeader'
import DetailMap from './components/DetailMap'
import DetailTicket from './components/DetailTicket'
export default {
  name: 'Detail',
  data(){
    return{
      slightName:'',
      bannerImg:'',
      galleryImgs:[],
      categoryList:[]
    }
  },
  components:{
     DetailBanner,
     DetailHeader,
     DetailMap,
     DetailTicket,
  },
  mounted(){
    this.getDetailInfo()
  },
  methods:{
    getDetailInfo(){
        // axios返回的结果是一个promise对象
      axios.get('/travel/index.php/Home/detail/index',{
        params:{
          id:this.$route.params.id
        }
      }).then(
        // 注意：这里绝对不可以写成this.getHomeInfoSucc（），否则请求的结果会是undefined
        this.getDetailInfoSucc
      )
    },
    getDetailInfoSucc(res){
      // console.log(res)
      res  = res.data
      // console.log(res)
      if(res.ret && res.data){
        // console.log(this.data.slightName)
        this.slightName = res.data.slightName
        this.bannerImg = res.data.bannerImg
        this.galleryImgs = res.data.galleryImgs
        this.categoryList = res.data.categoryList
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.detail 
    background #efefef
</style>